<template>
    <div
        class="btn-box"
        :style="{ height, lineHeight, marginTop, borderRadius, background }"
        @click="click"
    >
        {{ name }}
    </div>
</template>

<!-- <script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'ButtonBox',
    props: {
        name: {
            type: String,
            required: true
        }
    },
    setup(props) {
        return {
            btnName: props.name
        }
    }
 
})
</script> -->
<script setup lang="ts">
import { defineProps, withDefaults } from 'vue'

interface Props {
    name?: string
    height?: number | string
    lineHeight?: number | string
    marginTop?: number | string
    borderRadius?: string
    background?: string
    click?: Function
}
withDefaults(defineProps<Props>(), {
    name: '',
    height: '38px',
    lineHeight: '38px',
    marginTop: '10px',
    borderRadius: '18px',
    background: 'rgb(56, 156, 253)',
    click: () => {}
})
</script>
<style scoped lang="scss">
.btn-box {
    width: 100%;
    // height: 38px;
    color: #fff;
    background: rgb(56, 156, 253);
    text-align: center;

    border-radius: 18px;
}
</style>
